<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./jquery-1.11.1.js"></script>
    <style>
        li {
            font: 22px/30px "simsun";
            cursor: pointer;
            margin: 5px;
        }
    </style>

</head>

<body>
    <ul>
        <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
        <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
        <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
        <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
        <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
        <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
        <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
        <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
        <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
        <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
        <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
        <li>以色侍人，色衰而爱驰也;以才侍人，才进得久，互赏而终...</li>
    </ul>
    <script>
        $(function () {
            $(`ul li:odd`).css(`background`, `skyblue`)
            $(`ul li:even`).css(`background`, `green`)

            //鼠标经过
            $(`ul li`).mouseover(function () {
                $(this).css(`background`, `red`)
                //鼠标离开
                $(`ul li`).mouseout(function () {
                    $(`ul li:odd`).css(`background`, `skyblue`)
                    $(`ul li:even`).css(`background`, `green`)

                })
            }) 
        })
    </script>
</body>

</html>